<template>
  <div>
    <van-nav-bar
      title="15天护肤计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="skincare">
      <div class="skin-img">
        <img src="../../assets/img/养成2.png" alt="" />
      </div>

    <van-tabs v-model:active="active" sticky color="#39d167">
        <van-tab title="介绍">
          <div class="cult">
            <!-- 难度系数 -->
            <div class="cult-box">
              <div class="cult-left"> <span>•</span> 难度系数:</div>
              <div class="cult-right">
                <van-icon name="star" class="star" />
                <van-icon name="star"  class="star"/>
              </div>
                 <div class="cult-box">
              <div class="cult-left"> <span>•</span> 适用人群:</div>
              <div class="cult-right">
                有轻微皮肤问题和护肤疑问的人群
              </div>
                    <div class="cult-box">
              <div class="cult-left"> <span>•</span> 预期效果:</div>
              <div class="cult-right">
               改善皮肤状态
              </div>
            </div>
            </div>
            </div>

            <div class="images">
             <p>炎炎烈日中，你的皮肤是不是整日出油、长痘甚至变得越来越黑呢？</p>
             <p>不彻底的清洁和不正确的护肤步骤会让你的皮肤越来越糟。本方案从清洁和防晒两大方面入手，帮助大家走出护肤误区，养成正确的护肤习惯，从而改善你的皮肤状态。</p>
             <p>短短15天不会让大家的皮肤有翻天覆地的变化，但是只要你坚持下去，皮肤状态会变得越来越好的哦！</p>
            </div>
             <div class="prompt">
              <p class="prompt-title"><b>特别提示：</b></p>
              <p>有痘痘问题的小伙伴还可以同时订阅【21天战痘计划】，如有需要，可以重复订阅【15天护肤计划】。如果你的皮肤状态已经非常严重，建议使用春雨医生APP的免费提问功能咨询一下医生的意见。</p>
              <p>祝大家养成好的护肤习惯，一天一天美下去！</p>
             </div>
          </div>
        </van-tab>
        <van-tab title="目录">
          <div class="day">
          <div class="day1"><b>共15日</b></div>
          <div class="day2">
          <ul>
            <li>01日</li>
            <li class="hj">需要分清自己的皮肤类型</li>
          </ul>
           <ul>
            <li>02日</li>
            <li class="hj">选择合适的洗面奶</li>
          </ul>
           <ul>
            <li>03日</li>
            <li class="hj">学会正确的洗脸步骤</li>
          </ul>
           <ul>
            <li>04日</li>
            <li class="hj">这样选择护肤类化妆品</li>
          </ul>
           <ul>
            <li>05日</li>
            <li class="hj">学会选择合适的爽肤水</li>
          </ul>
           <ul>
            <li>06日</li>
               <li class="hj">精华素需要这样使用</li>
          </ul>

           <ul>
            <li>07日</li>
            <li class="hj">选择合适的眼部化妆品</li>
          </ul>
           <ul>
            <li>08日</li>
            <li class="hj">眼部保养要这样做</li>
          </ul>
           <ul>
            <li>09日</li>
            <li class="hj">睡前一定要卸妆！</li>
          </ul>
           <ul>
            <li>10日</li>
            <li class="hj">忍住！一整日不挤痘痘，</li>
          </ul>
           <ul>
            <li>11日</li>
            <li class="hj">可以这样对付痘痘！</li>
          </ul>
           <ul>
            <li>12日</li>
            <li class="hj">矿泉喷雾要这样用</li>
          </ul>
           <ul>
            <li>13日</li>
            <li class="hj">选择适合你的面膜</li>
          </ul>
           <ul>
            <li>14日</li>
            <li class="hj">化妆品要这样保存</li>
          </ul>
           <ul>
            <li>15日</li>
            <li class="hj">使用彩妆类化妆品需注意这些事情</li>
          </ul>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

     <div class="cult-btn">
      <div class="button"  v-if="flag==false" @click="addji">加入计划</div>
      <div class="but"  v-else>
       <span class="look">查看今天任务</span>
       <span class="cancel" @click="handiefalse">取消计划</span>
      </div>
    </div>
  </div>
</template>

  <script setup lang='ts'>
import { ref } from 'vue'

const active = ref(0)
const onClickLeft = () => history.back()
const flag=ref(false);
const addji=()=>{

  flag.value=true;
  console.log('加入计划');
  localStorage.setItem('flag',JSON.stringify(flag.value));

}
const handiefalse=()=>{
  flag.value=false;


}
</script>

  <style lang="scss" scoped>
.skincare {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: yellow;
  .skin-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }

   .cult {
    .cult-box {
      width: 100%;
      height: 100px;

    }
    .images{
      width: 95%;
      height:200px;
      margin-top: 25px;
      margin-left: 10px;

     p{
      line-height: 24px;
     }
    }
    .prompt{
      height: 520px;
      margin-top: 20px;
     .prompt-title{
      color: red;
     }
     p{
      line-height: 27px;
     }
    }
    .cult-left {
      float: left;
      height: 20px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
      span{
        color: #39d167;
      }
    }

    .cult-right {
      float: left;
      height: 30px;
      width: 70%;

      text-align: left;
      padding-top: 10px;
      .star{
        color: #ffa800;
      }

    }

  }



}

.cult-btn {
  position: fixed;
  width: 100%;
  height: 90px;
  // text-align: center;
  padding: 10px;
  background-color: #fff;
  bottom: 0;
  .button {
    width: 100%;
    height: 45px;
    background-color: #39d167;
    text-align: center;
    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;
    opacity: 1;
  }
  .but{
      width: 100%;
    height: 45px;


    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;
  // opacity: 0;
   display: flex;

   .look{
    width: 180px;
    display: inline-block;
     background-color: #39d167;
     text-align: center;
   }
   .cancel{
    width: 180px;
    display: inline-block;
    border: 1px solid #39d167;
    color: #39d167;
    text-align: center;
    margin-left: 10px;

   }
  }
}
.day{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-left: 15px;
background: #fff;
  .day1{
    width: 100%;
    height: 30px;
    font-size: 19px;
  }
  .day2{
    width: 100%;
    height: 850px;
    margin-top: 15px;

    ul{
      height: 50px;
      display: flex;
     justify-items: center;
   border-bottom: 1px solid #e5e5e5;

      li{
       color: #a7a7a7;
       margin-top: 10px;
      }
      .hj{
        margin-left: 25px;
      }
    }
  }
}
</style>
